<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
		<title></title>

		<script>
			<%--改变验证码--%>
			function changeImgCode() {
					$("#identity").attr("src","${pageContext.request.contextPath}/admin/code.action?ts="+new Date().getTime())
			}
		//	验证是否验证码正确
		$( function () {
				$("#codeInput").blur(function () {
					// alert($(this).val());
					var code = $(this).val();
				//	发送请求，判断验证码是否正确
					$.ajax({
						url:"${pageContext.servletContext.contextPath}/admin/checkCode.action?jsp_code=" + code,
						method:"get",
						dataType:"text",
						success:function (msg) {
							// alert(msg);
							$("#erroyCode").html(msg);
						}
					})

				})
				//获得焦点 内容清楚
			$("#codeInput").focus(function () {
				$("#erroyCode").html("");
			})
				//提交表单
			$("#mysubmit").click(function (){
				var erroyCode = $("#erroyCode").html();
				if (erroyCode.length > 0) {
					alert("验证码有误！");
					return;
				} else {
					$("#myform").submit();
				}
			})
				}
		)
		</script>

	</head>

	<body>
		<div id="login">
			<div id="top">
				<img src="${pageContext.request.contextPath}/images/cloud.jpg" /><span>LOGIN</span>
			</div>
			<div id="bottom">
				<form id="myform" action="${pageContext.request.contextPath}/admin/login.action" method="post">
					<table border="0px" id="table">
						<tr>
							<td class="td1">用户名：</td>
							<td><input type="text" value="admin" placeholder="Username" class="td2" name="name"></td>
						</tr>
						<tr>
							<td></td>
							<td><span id="nameerr"></span></td>
						</tr>
						<tr>
							<td class="td1">密码：</td>
							<td><input type="password"  value="000000" placeholder="Password" class="td2" name="pwd"></td>
						</tr>
						<tr style="position: relative">
							<td class="td1">验证码：</td>
							<td>
								<input type="text" id="codeInput" class="td2" style="width: 100px" name="code">
								<img title="点击更换一张验证码" id="identity" src="${pageContext.request.contextPath}/admin/code.action" onclick="changeImgCode()">
								<div style="position: absolute; width: 100px; right: -15px; top: 15px"><span style="color: red;" id="erroyCode">${errmsg}</span></div>
							</td>

						</tr>
						<tr>
							<td></td>
							<td><span id="pwderr"></span></td>
						</tr>
						<tr>
							<td></td>
							<td><input type="button" id="mysubmit" value="登录" class="td3">
								<a href="${pageContext.request.contextPath}/regist.jsp"><input type="button" value="注册" class="td3	"></a>
							</td>
						</tr>
					</table>
				</form>
			</div>

		</div>
	</body>

</html>